import React, { useState } from 'react';
import { Input, Cell, Button,hooks  } from 'react-vant';
import './CodeCheck.less'


type propsTypes = {
  sendText: string,
  leftText: string,
  downTime: number,
  outCode:Function
}




export default function CodeCheck ({sendText,leftText,downTime,outCode}:propsTypes){

  let [initLoading,setInitLoading] = useState(false);
  let [downTimes,setDowmtimes] = useState(downTime == 0?60:downTime);
  const [state, updateState] = hooks.useSetState({
    code: '',
  })
  const sendMsg =() =>{
   setInitLoading(true);
   let time = setInterval(() =>{
    setDowmtimes(downTimes -- )
    
    if (downTimes <= 0) {
      setDowmtimes(60 )
      setInitLoading(false);
      clearTimeout(time)
    }
    
   },1000)
     
  }

  const upDate=(code: any) =>{
    updateState({ code })
  
    outCode(code)
  }
  return (
    <Cell>
      <Input
       value={state.code}
       onChange={code => upDate(code)}
        prefix={leftText}
        suffix={<Button className='btn'  loading ={initLoading} onClick={()=>sendMsg()} loadingText={`${downTimes}s`}>{sendText}</Button>}
        placeholder="请输入短信验证码"
      />
    </Cell>
  );
}